<template>
    <div class="overview-box">
        <div v-if="yesterdayData">
            <topTitle title="昨日数据"/>
            <section class="total-box">
                <div class="title-box">
                    <div class="item">日活</div>
                    <div class="item">创建房间</div>
                    <div class="item">有效房间</div>
                    <div class="item">对局</div>
                    <div class="item">队长平均匹配时间(s)</div>
                    <div class="item">昨日补贴(趣金币)</div>
                </div>
                <div class="content-box">
                    <div class="item">{{ yesterdayData.teamActiveCount }}</div>
                    <div class="item">{{ yesterdayData.roomCount }}</div>
                    <div class="item">{{ yesterdayData.validRoomCount }}</div>
                    <div class="item">{{ yesterdayData.playGameCount }}</div>
                    <div class="item">{{ yesterdayData.matchAverageTime }}</div>
                    <div class="item">{{ yesterdayData.allowance }}</div>
                </div>
            </section>
        </div>
        <div class="picker-box">
            <topTitle title="历史数据"/>
            <el-date-picker
                v-model="echartsDate.date"
                :clearable="false"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="dateChange">
            </el-date-picker>
        </div>
        <section id="echarts"></section>
        <el-table :data="historyData" border style="width: 100%; margin: 20px 0;" :load="load" row-key="id"
            lazy :tree-props="{children: 'children', hasChildren: 'ymd'}">
            <el-table-column min-width="150" label="时间">
                <template slot-scope="scope">
                    <span>{{ tableFormatDate(scope.row.ymd) }}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="70" label="区服">
                <template slot-scope="scope">
                    <span v-if="scope.row.serverType === 1">微信</span>
                    <span v-if="scope.row.serverType === 2">QQ</span>
                    <span v-if="!scope.row.serverType">-</span>
                </template>
            </el-table-column>
            <el-table-column width="60" prop="teamActiveCount" label="日活">
                <template slot-scope="scope">
                    <span v-if="!scope.row.teamActiveCount && scope.row.teamActiveCount !== 0">-</span>
                    <span v-else>{{ scope.row.teamActiveCount }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="roomCount" label="房间数"></el-table-column>
            <el-table-column prop="validRoomCount" label="有效房间"></el-table-column>
            <el-table-column width="60" prop="playGameCount" label="对局"></el-table-column>
            <el-table-column min-width="150" prop="matchAverageTime" label="队长平均匹配时间(s)">
                <template slot-scope="scope">
                    <span v-if="!scope.row.matchAverageTime && scope.row.matchAverageTime !== 0">-</span>
                    <span v-else>{{ scope.row.matchAverageTime }}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="100" prop="allowance" label="补贴(趣金币)">
                <template slot-scope="scope">
                    <span v-if="!scope.row.allowance && scope.row.allowance !== 0">-</span>
                    <span v-else>{{ scope.row.allowance }}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="100" prop="matchPV" label="快速匹配pv"></el-table-column>
            <el-table-column min-width="100" prop="matchUV" label="快速匹配uv">
                <template slot-scope="scope">
                    <span v-if="!scope.row.matchUV && scope.row.matchUV !== 0">-</span>
                    <span v-else>{{ scope.row.matchUV }}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="80" prop="playGameUserCount" label="对局人数">
                <template slot-scope="scope">
                    <span v-if="!scope.row.playGameUserCount && scope.row.playGameUserCount !== 0">-</span>
                    <span v-else>{{ scope.row.playGameUserCount }}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="80" prop="startGameUpTimeCount" label="组队超时"></el-table-column>
            <el-table-column min-width="80" prop="matchRoomUpTime" label="匹配超时"></el-table-column>
            <el-table-column min-width="80" prop="inviteMatchUserCount" label="邀请组队">
                <template slot-scope="scope">
                    <span v-if="!scope.row.inviteMatchUserCount && scope.row.inviteMatchUserCount !== 0">-</span>
                    <span v-else>{{ scope.row.inviteMatchUserCount }}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="120" prop="startUpOneHourRoomCount" label="开局超过1小时"></el-table-column>
        </el-table>
    </div>
</template>

<script>
import echarts from 'echarts'
import { formatDate } from '@/utils/utils'
import { extractDataForEcharts, getEchartsSeries } from '@/assets/js/quTeam'

export default {
    name: 'commonOverview',
    data () {
        return {
            echartsTitle: {
                '日活': true,
                '房间数': false,
                '有效房间': false,
                '对局': false,
                '平均匹配时间(s)': false,
                '补贴(元)': false,
                '快速匹配pv': false,
                '快速匹配uv': false,
                '对局人数': false,
                '组队超时': false,
                '匹配超时': false,
                '邀请组队': false,
                '开局超过1小时': false
            },
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() < new Date('2020-08-07 00:00:00').getTime()
                },
                shortcuts: [
                    {
                        text: '最近7天',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            end.setTime(end.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近30天',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            end.setTime(end.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', [start, end])
                        }
                    }
                ]
            },
            echartsDate: {
                // date: [Date.now() - 3600 * 1000 * 24 * 7, Date.now() - 3600 * 1000 * 24]
                date: [Date.now() - 3600 * 1000 * 24 * 7, Date.now()]
            },
            yesterdayData: {
                teamActiveCount: 0,
                roomCount: 0,
                validRoomCount: 0,
                playGameCount: 0,
                matchAverageTime: 0,
                allowance: 0
            },
            historyData: []
        }
    },
    mounted () {
        this.echartsDate.fromDate = formatDate(Date.now() - 3600 * 1000 * 24 * 7, 'YYYY-MM-DD') + ' 00:00:00'
        this.echartsDate.endDate = formatDate(Date.now(), 'YYYY-MM-DD') + ' 23:59:59'
        this.getList('yesterday') // 请求昨日数据
        this.creatEcharts()
    },
    methods: {
        // 获取数据
        getList (yesterday) {
            let params = {
                pageNum: 1,
                pageSize: 99999,
                fromDate: this.echartsDate.fromDate,
                endDate: this.echartsDate.endDate
            }
            this.$http.get('/team/getTeamHistoryData', {
                params
            }).then(res => {
                if (res.code === '0') {
                    if (yesterday) {
                        this.yesterdayData = res.data[1]
                    }
                    res.data.map((item, index) => {
                        item.ymd = formatDate(item.ymd, 'YYYY-MM-DD')
                        item.id = index + 1
                    })
                    this.historyData = res.data
                    this.echartsData = JSON.parse(JSON.stringify(this.historyData)).reverse()
                    this.setEcharts()
                }
            })
        },

        setEcharts () {
            let XTimeList = extractDataForEcharts(this.echartsData, 'ymd')
            let myChart = echarts.init(document.getElementById('echarts'))
            let option = {
                xAxis: {
                    data: XTimeList
                },
                series: getEchartsSeries(this.echartsData)
            }
            myChart.setOption(option)
        },

        creatEcharts () {
            let myChart = echarts.init(document.getElementById('echarts'))
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: Object.keys(this.echartsTitle),
                    selected: this.echartsTitle,
                    type: 'scroll'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            }
            myChart.setOption(option)
        },

        // 加载子数据
        load (tree, treeNode, resolve) {
            this.$http.get('/team/getTeamDataByServerType', {
                params: {
                    ymd: tree.ymd + ' 00:00:00'
                }
            }).then(res => {
                res.data.map((item, index) => {
                    item.id = new Date(tree.ymd).getTime() / 10000 + index
                })
                resolve(res.data)
            })
        },

        // 日期切换
        dateChange (val) {
            this.echartsDate.fromDate = formatDate(new Date(val[0]), 'YYYY-MM-DD') + ' 00:00:00'
            this.echartsDate.endDate = formatDate(new Date(val[1]), 'YYYY-MM-DD') + ' 23:59:59'
            this.getList()
        },

        // 时间转换
        tableFormatDate (time) {
            return formatDate(time, 'YYYY-MM-DD')
        }
    }
}
</script>

<style lang="scss">
    .overview-box {
        padding-top: 20px;
        .total-box {
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #eeeeee;
            border-radius: 10px;
            .title-box {
                display: flex;
                font-size: 13px;
                font-weight: 600;
                color: #9ba0b1;
            }
            .content-box {
                margin-top: 4px;
                display: flex;
                font-size: 15px;
                font-weight: 500;
                color: #393939;
            }
            .item {
                flex: 1;
                display: flex;
                justify-content: center;
            }
        }

        .picker-box {
            display: flex;
            justify-content: space-between;
        }
        #echarts {
            height: 400px;
            margin-top: 20px;
        }
    }
</style>
